<template>
  <div class="app-container" v-loading="loading">
    <div class="header">
      <div class="title1">
        <i class="el-icon-s-platform"></i><span>爆箱品存储区</span>
      </div>
      <!-- <div class="getBtn" @click="handleGet">
      </div> -->
      <div class="backB">
        <el-button
          type="primary"
          icon="el-icon-tickets"
          round
          @click="handleburstList"
          >报表查看</el-button
        >
        <!-- <i class="el-icon-tickets" @click="handleburstList"></i> -->
        <el-button type="info" icon="el-icon-delete" round @click="handleClear"
          >清空货位数据</el-button
        >
        <img src="@/assets/images/back.png" alt="" @click="goBack" />
      </div>
    </div>
    <!-- <div class="formCenter">
      
    </div> -->
    <div class="content">
      <div class="box">
        <div class="boxContent">
          <div
            class="boxItem"
            v-for="(item, index) in boxlist"
            :key="index"
            :style="{
              backgroundColor: item.subCount != 0 ? '#007be9B3' : '#83d000B3',
            }"
            @click="handleOpendialog(item)"
          >
            <div class="boxlocation">{{ item.locationNo }}</div>
            <div class="boxCount">{{ item.subCount }}</div>
          </div>
        </div>
      </div>
      <div class="getboxBtn">
        <div class="circle" @click="handleGet">取</div>
      </div>
      <div class="pallet">
        <div class="palletContent">
          <div
            class="palletItem"
            v-for="(item, index) in palletlist"
            :key="index"
            :style="{
              backgroundColor: item.subCount != 0 ? '#007be9B3' : '#83d000B3',
            }"
            @click="handleOpenpallet(item)"
          >
            <div class="boxCount">{{ item.locationNo }}</div>
            <div class="boxlocation">{{ item.subCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增爆品箱号"
      width="500px"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="箱号:" :label-width="formLabelWidth" prop="boxNo">
          <el-input v-model="form.boxNo" placeholder="请输入箱号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="取箱详情"
      width="500px"
      :visible.sync="dialoggetVisible"
      :close-on-click-modal="false"
      custom-class="container"
    >
      <el-form :model="getform" :rules="getrules" ref="getruleForm">
        <el-form-item label="箱号:" :label-width="formLabelWidth" prop="boxNo">
          <el-input v-model="getform.boxNo" placeholder="请输入箱号"></el-input>
          <el-button type="primary" round @click="handleLocationNo"
            >查询</el-button
          >
          <el-form-item
            ><div class="returnMsg">{{ locationNomsg }}</div></el-form-item
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoggetVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitgetForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="报表详情"
      width="800px"
      :visible.sync="dialoglistVisible"
      :close-on-click-modal="false"
    >
      <el-table :data="tableDetailData" v-loading="detailloading" height="680">
        <el-table-column prop="boxNo" label="箱号" align="center">
        </el-table-column>
        <el-table-column prop="locationNo" label="货位编号" align="center">
        </el-table-column>
        <el-table-column
          prop="cunTime"
          label="存入时间"
          align="center"
          width="180"
        ></el-table-column>
        <!-- <el-table-column
          prop="quTime"
          label="取出时间"
          align="center"
          width="180"
        ></el-table-column> -->
        <el-table-column prop="delType" label="状态" align="center">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.box_status"
              :value="scope.row.delType"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="操作验证"
      :visible.sync="centerDialogVisible"
      width="22%"
      left
      :close-on-click-modal="false"
    >
      <el-form
        :model="passForm"
        status-icon
        :rules="passrules"
        ref="passForm"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="passForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('passForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listLocation,
  addBoxno,
  removeBoxno,
  listdetail,
  setLocation,
  clearallLocation,
} from "@/api/subSystem/workday";
import { getcheckPassword } from "@/api/subSystem/continer";
export default {
  dicts: ["box_status"],
  data() {
    var passwordError = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        getcheckPassword(value).then((res) => {
          this.priorityNum = res.msg;
          if (res.msg == "admin") {
            callback();
          } else if (res.msg == "supper") {
            callback();
          } else if (res.msg == "false") {
            callback(new Error("密码错误"));
          }
        });
      }
    };
    return {
      // 密码验证
      centerDialogVisible: false,
      passForm: {
        pass: null,
      },
      passrules: {
        pass: [{ validator: passwordError, trigger: "blur" }],
      },
      // 报表弹窗
      dialoglistVisible: false,
      tableDetailData: [],
      detailloading: false,
      //   取箱操作
      dialoggetVisible: false,
      getform: {},
      getrules: {
        boxNo: [
          { required: true, message: "请输入箱号", trigger: "blur" },
          {
            pattern: /^\d{6}$/,
            message: "请输入正确的6位数字箱号",
            trigger: "blur",
          },
        ],
      },
      locationNomsg: "",
      // 爆品箱弹窗
      dialogFormVisible: false,
      formLabelWidth: "60px",
      form: {},
      rules: {
        boxNo: [
          { required: true, message: "请输入箱号", trigger: "blur" },
          {
            pattern: /^\d{6}$/,
            message: "请输入正确的6位数字箱号",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      // 库位列表
      boxlist: [],
      //   库位值
      boxlocation: "",
      palletlist: [],
    };
  },
  mounted() {
    this.handleQuery();
  },
  beforeDestroy() {},
  methods: {
    // 报表弹窗
    handleburstList() {
      this.dialoglistVisible = true;
      listdetail().then((res) => {
        this.tableDetailData = res.data;
      });
    },
    addreset() {
      this.form = {
        boxNo: "",
      };
      this.resetForm("form");
    },
    setDialogData(locationNo) {
      this.addreset();
      this.dialogFormVisible = true;
      this.boxlocation = locationNo;
    },
    // 箱子库位新增
    handleOpendialog(items) {
      this.setDialogData(items.locationNo);
      //   this.dialogFormVisible = true;
      //   this.boxlocation = items.locationNo;
      //   console.log(items.locationNo);
    },
    // 托盘新增
    handleOpenpallet(items) {
      this.setDialogData(items.locationNo);
      //   this.dialogFormVisible = true;
      //   this.boxlocation = items.locationNo;
      //   console.log(items.locationNo);
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          addBoxno({ locationNo: this.boxlocation, ...this.form }).then(
            (res) => {
              console.log(res);
              this.$modal.msgSuccess("新增成功");
              this.dialogFormVisible = false;
              this.handleQuery();
            }
          );
        }
      });
    },
    getreset() {
      this.getform = {
        boxNo: "",
      };
      this.resetForm("getform");
    },
    // 取箱
    handleGet() {
      this.locationNomsg = "";
      this.getreset();
      this.dialoggetVisible = true;
    },
    // 取箱查询库位编码
    handleLocationNo() {
      this.detailloading = true;
      setLocation({ boxNo: this.getform.boxNo }).then((res) => {
        this.locationNomsg = res.msg;
        this.detailloading = false;
      });
    },
    submitgetForm() {
      this.$refs["getruleForm"].validate((valid) => {
        if (valid) {
          removeBoxno(this.getform).then((res) => {
            console.log(res);
            this.$modal.msgSuccess("取箱成功");
            this.dialoggetVisible = false;
            this.handleQuery();
          });
        }
      });
    },
    goBack() {
      this.$router.push("/subSystem1");
    },
    handleQuery() {
      this.loading = true;
      listLocation({ type: "HJ" }).then((res) => {
        this.boxlist = res.data;
        this.loading = false;
      });
      listLocation({ type: "TP" }).then((res) => {
        this.palletlist = res.data;
        this.loading = false;
      });
    },
    handleClear() {
      this.centerDialogVisible = true;
      this.passForm.pass = null;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("清空数据");
          clearallLocation().then((res) => {
            this.$modal.msgSuccess("清空成功");
            this.centerDialogVisible = false;
            this.handleQuery();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  min-height: 1080px;
  background: #024b51;
  .el-icon-s-platform::before {
    color: #00d9ff;
    margin-right: 8px;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  ::v-deep .container .el-input {
    width: 80%;
    margin-right: 5px;
  }
  .container .returnMsg {
    font-size: 20px;
    color: #ff8800;
  }
  .title1 {
    font-size: 16px;
    // margin-bottom: 15px;
    color: #ffffff;
    width: 140px;
    padding: 5px;
    border-bottom: 1px dotted #8ddfff;
  }
  .header {
    // margin-top: -10px;
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 220px;
      margin-right: 20px;
    }
    .getBtn {
      cursor: pointer;
      text-align: center;
      line-height: 25px;
      width: 100px;
      height: 50px;
      color: #ffffff;
      font-weight: 700;
      background: url(~@/assets/images/getbox.png) center center no-repeat;
      background-size: contain;
    }
    .backB {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 10%;
      }
    }
    // .backB .el-icon-tickets::before {
    //   color: #00d9ff;
    //   font-size: 40px;
    //   cursor: pointer;
    // }
  }
  //   .formCenter {
  //     height: 62px;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     margin-bottom: 10px;
  //   }
  .content {
    width: 100%;
    height: 820px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-top: 20px;
    margin-top: 50px;
    // background: #024b51;
    .box {
      width: 69%;
    //   width: 70%;
      height: 100%;
      background: url(~@/assets/images/burstBox.png) center center no-repeat;
      background-size: 100% 100%;
      border: 1px solid #f3f3f3;
      position: relative;
      .boxContent {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        // left: 2%;
        // right: 2%;
        padding: 2% 6% 2% 5%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
      .boxItem {
        width: 9%;
        height: 20%;
        display: flex;
        justify-content: center;
        margin-right: 6px;
        margin-bottom: 10px;
        position: relative;
        cursor: pointer;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
          0 6px 6px rgba(0, 0, 0, 0.23);
        .boxlocation {
          position: absolute;
          bottom: 20px;
          font-size: 25px;
          color: #fff;
        }
        .boxCount {
          position: absolute;
          top: 30%;
          font-size: 30px;
          color: #fff;
        }
      }
    }
    .getboxBtn {
      width: 5%;
      height: 11%;
      .circle {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #8c62fd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
        font-weight: 500;
        color: #fff;
        box-shadow: 0 10px 20px rgba(58, 57, 57, 0.19),
          0 6px 6px rgba(0, 0, 0, 0.23);
          cursor: pointer;
      }
    }
    .pallet {
      width: 25%;
      height: 100%;
      background: url(~@/assets/images/pallet.png) center center no-repeat;
      background-size: 100%;
      border: 1px solid #f3f3f3;
      position: relative;
      .palletContent {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        // left: 2%;
        // right: 2%;
        padding: 2% 2%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .palletItem {
          width: 100%;
          height: 49%;
          margin-bottom: 10px;
          display: flex;
          justify-content: center;
          cursor: pointer;
          position: relative;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
          .boxlocation {
            position: absolute;
            top: 26%;
            font-size: 60px;
            color: #fff;
          }
          .boxCount {
            position: absolute;
            top: 46%;
            font-size: 40px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>